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Давайте знакомиться 


— 62 Сэм Булатов 
— & 4+ лет фронтенд-разработки 
= Фронтендер в Waliot 


— 22 Организатор в krd.dev 


О чем будем говорить 


— Что такое реактивное программирование? 
— Какую проблему пытается решить этот подход? 
— Как это все связано с фронтендом и фреймворками? 


Краткая история 


90г. 


— Постоянная перепроверка состояния по cooldown 
-- Вследствие этого может быть задержка отклика от интерфейса 


92-95 гг. 


— В 1992 году Microsoft представляет новый подход к разработке 
интерфейсов — Event Driven 
— Позже, в 1995, этот шаблон проектирования назовут Observer 


97 г. 


FRAN (Functional Reactive Animation) 


kids u = 
delayAnims 0.5 
(map (move (mouseMotion u)) 


[jake, becky, charlotte, pat]) 


00-е 


У сети много проблем, которые 
надо решать 


Сеть это задержка, данные получаются немоментально 
Сеть может упасть, она нестабильна 

У сети есть ограничения, например, пропускная способность 

У устройства пользователя тоже есть ограничения, например ОЗУ 
иеше много всяких разных неприятностей... 


Reactive Extension 


3TO 1 ПЫТАЮСЬ fk. ЗАЧЕМ 


НУЖНО PEI РЕАКТИВНОЕ ПРОГРАММИРОВАНИЕ ' 


imgflip.c 


Как только ты понимаешь, что такое реактивное программирование, ты 
теряешь способность обьяснить это другим. 
Кто-то очень умный 


RxJS? 


Получатель Получатель Получатель 


О Search or jump to... Pullrequests Issues Marketplace Explore 


D Overview A Repositories 103 ІН Projects 1 @ Packages vr Stars 922 
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Hi, I'm Sam Bulatov I 


I am Frontend developer at @waliot and @nible-io also core maintainer @be-Cycled app 21090 


e I'm looking to collaborate оп @be-Cycled 


• All of my projects are available at https://mephi.dev/projects 


• | regularly write articles on https://mephi.dev 

е Ask me about angular, rxjs 

Sam Bulatov • How to reach me mephistorine@gmail.com 
mephistorine * Know about my experiences https://mephi.dev/resume 


А • Fun fact Professional rollerblade skater 
Frontend developer at @waliot and 


@nible-io. Member of the organizing 
committee of the @krddevdays. Core 


Connect with me: Main projects 
editor at @learnrxjs. 
• twitter е LearnRxJSRu - Unofficial russian translate RxJS 
Edit profile * instagram documentation and more 
Ar 52 followers - 125 following Languages and Tools: Maintained chats 
@waliot, @nible-io “ angular • RxJS — русскоговорящее сообщество 
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Получатель Получатель Получатель 


Абсолютно 


Реактивность !-- Асинхронность 


click 


MOUSEMOVE 


load WebSocket 


DataStructure 


Array 


time 


Подписаться м 


Observer Observer Observer Observer 


Принципиальная разница в 
модели получения данных 


Модель описывает модель взаимодействия меж двумя сушностями, 
Производителем данных и их Потребителем. Моделей всего две: 


— Pull (Вытягивание) 
— Push (Проталкивание) 


Единичное Множественное 
Pull Function Iterator 
Push Promise Observable 


Пример из жизни 


Шаги Калории 


A / 

г Å, 
isGoalReached = stepCount > X && 
caloriesCount < N 


isGoalReached 
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Observable Observer 


A 4960 4970 4980 4990 5000 


Поток данных: Шаги 
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90 90 110 120 130 


Поток данных: Калории 


Ф 


combine 


{> 
(4960,90) (4970,90) (4980,110) (4990,120) (5000,130) time 


AAA. 
(4960,90) (4970,90) (4980,110) (4990,120) (5000,130) time 


filter(noruka проверки цели) 


90 90 |110 120 130 


Поток данных: Калории 


Ф 


90 90 110 120 130 time 


distinct() 


90 110 120 130 time 


Реализации реактивности 


Обьектные Функциональные 
— CellX — Preact Signals 
— MobX — RxJS 
— $mol_wire — Effector 


— nanostores 


Preact Signals и RxJS 


RxJS 


01. £fromEvent (document, "click") 


02.  .subscribe((event) => console.debug(event.type) ) 


(document, "click") 


02. .pipe( 
03. scan((count) => count + 1, ®) 
04. 0) 


(( ) console. 


("Count: $$ count *`)) 


Операторы 


— combine 
— filter 
— distinct 


01. 
02. 
03. 
04. 
05. 
06. 


Это не магия 


const multipleX2 = (value) => value x 2 

const formatNumber = (value: number) => 
value.toLocaleString("RU-ru") 

const produceNum = compose(multipleX2, formatNumber) 

console.log(produceNum(22_433.33)) 

// > 22 433,3 


Это не магия 


. .pipe( 

map(), 

filter(), 
distinctUntilChanged() 


Реализуем на RxJS 


01. function isGoalReached ( 

02.  currentStepCount: number, 

03.  currentCalories: number 

04. ): boolean i 

05. return currentStepCount >= 5000 && currentCalories >= 130 


06. t 


01. const steps = from([ 4960, 4970, 4980, 4990, 5000 |).ріре( 
02.  concatMap((value) => of(value).pipe(delay(1000))) 
03. ) 


01. const calories = from([ 90, 90, 110, 120, 130 ]).pipe( 
02. concatMap((value) => of(value).pipe(delay(1000))) 
03. ) 


01. combineLatest([ steps, calories 1) 


02.  .subscribe(() => sendCongratulationsNotify()) 


([ steps, calories |) 


02. .pipe( 
03. filter(([ stepCount, calories |) => isGoalReached (stepCour 
04. ) 


(0) O) 


01. const isGoalReachedSub = (L steps, calories |) 


( 


((L stepCount, calories |) => (stepCour 


(() => O) 


06. isGoalReachedSub.unsubscribe() 


01. 
02. 
03. 
04. 
05. 
06. 


Abort Controller 


const controller = new AbortController() 


fetch("/hello", + signal: controller.signal }) 


.then(() => 44) 


onDestroy(() => 3 


[» 


controller.abort() 


01. const controller = new AbortController() 
02. element.addEventListener( 

03. "click", 

04. О => 1$, 

05. 3 signal: controller.signal $ 


06.) 


controller 


"click", 


05. 3 signal: controller 


.signal } 


Б RxJS это есть 
давно! 


91 
02 


03. 
04. 


. const subject = new Subject() 
. const observable = from(...).pipe( 


takeUntil(subject) 


01. 
02. 
03. 
04. 
05. 


06. 
07. 


const subi = 
const sub2 = 
const sub3 = 


onDestroy(() 


observable.subscribe() 
observable.subscribe() 
observable.subscribe() 


=> 3 


subject.next() 


subject.complete() 


$) 


Чтоеше можно 
делать? 


Что еше можно делать? 


debounceTime 
Promise interop 

retry 

retryWhen (offline) 
shareReplay 
catchError 

webSocket 

... И еце дофига всего 


Preact Signals 


01. 
02. 
03. 
04. 
05. 


06. 
07. 


const name = signal("Jane") 

const surname = signal("Doe") 

const fullName = computed(() => ...) 
effect(() => console.log(fullName.value)) 


// > Jane Doe 


name.value = "Sam" 


// > Sam Doe 


01. const steps = signal(0) 


02. const calories = signal(0) 


01 
02. 
03 
04. 


. const stepValues [ 4960, 4970, 4980, 4990, 5000 | 


. for (let i = 0; i < stepValues.length; i++) 3 


setTimeout(() => + 


stepValues.value = stepValues[ i | 


+, 1х 1000) 


01. effect(() => 3 


02. 
03. 
04. 
05. 


$) 


if (isGoalReached(steps.value, calories.value)) + 


sendCongratulationsNotify() 


01. const unsubscribe = (() => 3 
if ( (steps.value, calories.value)) 3 
() 
$ 
5) 


06. unsubscribe() 


Итоги 


Минусы 


Тяжело изучать 

Сложно дебажить 

Не всегда удобно тестировать 
Может быть запутанный код, 
особенно с операторами RxJS 


Спасибо, с вами был Сэм! 


mephi.dev/gsrp 


